{% extends 'web/layout/basic.html' %}
{% load static %}
{% block title %}用户登录{% endblock title %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}" />
    <style>
        .error-msg {
            color: red;
            position: absolute;    
            font-size: 11px;        
        }
       
    </style>
{% endblock css %}

{% block content %}
<!-- <h3>用户注册</h3> -->
    <div class="account">
        <form id="regForm" method="POST" novalidate>
            {% csrf_token %}
            {% for field in objs %}
                {% if field.name == 'code' %}
                <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label> 
                        <div class="row">   <!-- <div class="clearfix"> -->
                            <div class="col-xs-7">
                                {{ field }}
                                <span class="error-msg"></span>    
                            </div>
                            <div class="col-xs-5">
                                <image src="{% url 'web:image_code' %}" id="imageCode" title="点击更换图片">
                                <!-- <input id="btnSms" type="button" class="btn btn-default" value="{{ret.msg}}" > -->
                            </div>
                        </div>
                </div> 
                {% else %}
                    <div class="form-group">
                        <label for= "{{ field.id_for_label }}">{{field.label}}</label> 
                        {{field}}
                        <span class="error-msg"></span>    
                    </div>
                {% endif %}
            {% endfor %}
            <!-- <button type="submit" class="btn btn-default">Submit</button> -->
            <div class="row">
                <div class="col-xs-3">
                <a onclick="submitForm();" class="btn btn-primary">登录</a>
                </div>

                <div class="col-xs-7" style="float:right">

                <a id="randCode" href="/web/login/sms" align="right" style="float:right">短信验证码登录</a>
                </div>
            </div>
        </form>
    <div>
        
{% endblock content %}

{% block js %}
    <script>
    //<!-- 页面加载完后自动执行，为btnSms绑定函数 -->
        $(function(){
            bindClickBtnSms();
            bindClickImageCode();
        })

        function bindClickBtnSms(){
            $('#btnSms').click(function(){
                $('.error-msg').empty();        //删除error-msg的之前的信息信息
                var mobilePhone = $('#id_mobile_phone').val();
                var tpl = 'login'
                //alert(mobilePhone );
                $.ajax({
                    url:"{% url 'web:send_sms'%}", //这个链接可以进入任意页
                    type:'GET',     //register?mobile_phone=mobilePhone&?tpl=tpl
                    data:{
                        mobile_phone: mobilePhone,
                        tpl: tpl
                    },
                    dataType:'JSON',

                    success:function(res){
                        //console.log(res);
                        if (res.status){
                            //console.log('倒计时');
                            $("#id_randCode").next().text(res.error);
                            sendSmsRemind();
                            
                        }else{
                            //console.log(res.error);
                            $.each(res.error,function(key,value){           //$.each(循环res.error字典, 运行函数(key,value){ 对key和value进行操作})
                                $("#id_"+key).next().text(value[0]);
                            })
                        }
                    }
                }) 
            })
        }

        function bindClickImageCode(){
            $('#imageCode').click(function(){
                var oldSrc = $(this).attr('src');   //$(this)获取当前鼠标标签
                $(this).attr('src', oldSrc+'?');     //地址+?会重新访问这个地址

            })
        }


        function sendSmsRemind(){
            $("#btnSms").prop("disabled",true);
            var time=10;
            var obj = setInterval(function(){
                $("#btnSms").val(time+"秒重新发送");
                time = time-1;
                if (time<1){
                    clearInterval(obj);
                    $("#btnSms").val('点击获取验证码').prop("disabled",false);
                }
                }, 1000)
        }
    </script>
        <script>
             function submitForm(){
                //$('.errmsg').remove();
                $('.error-msg').empty();        //删除error-msg的之前的信息信息
                //var email=$('input[name="email"]').val();
                //var var_nm1 = $.cookie('csrftoken');
                var username = $('#id_username').val();
                var email= $('#id_email').val();
                var password= $('#id_password').val();
                var confirm_password= $('#id_confirm_password').val();
                var mobile_phone= $('#id_mobile_phone').val();
                var code= $('#id_code').val();

                    $.ajax({
                        url: "{% url 'web:login' %}",
                        type: 'POST',
                        //headers:{'X-CSRFToken': token},
                        data:$('#regForm').serialize(),
                        dataType:'JSON',
                        success:function(arg){
                            //console.log(arg);
                            if(arg.status){
                               window.location.href = arg.msg;
                              // window.open("GET",url,true); 

                            }
                            else{
                                $.each(arg.msg, function(index,value){
                                    //console.log(index,value);
                                    var tag = document.createElement('span');
                                    tag.innerHTML =value[0];
                                    tag.className='errmsg';
                                   if (index=='__all__'){
                                        index = 'confirm_password'
                                    }
                                    //console.log('input[name="'+index+'"]');
                                    //$('#regForm').find('input[name="'+index+'"]').after(tag);
                                    $('#regForm').find('input[name="'+index+'"]').next().text(value[0]);
                                })
                                
                            }    

                        }
                    })
                }

            $(function () {
                $('#imageCode_bk').click(function () {
                    var oldSrc = $(this).attr('src');
                    $(this).attr('src', oldSrc + "?");
                })
            })

            function submitCode(){
                $('.errmsg').remove();
                //var nm1=$('input[name="inputname"]').val();
                //var var_nm1 = $.cookie('csrftoken');
                //var mobile_phone = $('#id_mobile_phone').val();
                    $.ajax({
                        url: '/app01/submit_code/',
                        type: 'POST',
                        //headers:{'X-CSRFToken': token},
                        //data: { 'id':1},
                        data:$('#regForm').serialize(),
                        dataType:'JSON',
                        success:function(arg){
                            //console.log(arg);
                            if (arg.status){

                            $("#btnSms").attr('value','已发送 60s');
                            $("#btnSms").attr('disabled',true);
                            }
                            else{
                                $.each(arg.msg, function(index,value){
                                    //console.log(index,value);
                                   if (index=='mobile_phone'){
                                    var tag = document.createElement('span');
                                    tag.innerHTML =value[0];
                                    tag.className='errmsg';
                                    //console.log('input[name="'+index+'"]');
                                    $('#regForm').find('input[name="'+index+'"]').after(tag);
                                   }
                                })

                            }
                        }
                    })
            }

        </script>

{% endblock js %}